{% extends '__base__.html' %}

{% block title %}任务列表{% endblock %}

{% block beforehead %}
<link rel="stylesheet" href="/static/css/components/upload.css" />
<link rel="stylesheet" href="/static/css/components/datepicker.css" />
<link rel="stylesheet" href="/static/css/components/placeholder.css" />
<link rel="stylesheet" href="/static/css/components/form-file.css" />
<link rel="stylesheet" href="/static/css/components/progress.css" />


<script src="/static/js/components/upload.js"></script>
<script src="/static/js/components/datepicker.js"></script>

<script>
$(function(){
        var progressbar = $("#progressbar"),
            bar         = progressbar.find('.uk-progress-bar'),
            settings    = {

            action: '/api/ljt/upload', // 上传路径 url

            allow : '*.(xlsx|xls)', // 只允许上传图片

            loadstart: function() {
                bar.css("width", "0%").text("0%");
                progressbar.removeClass("uk-hidden");
            },

            progress: function(percent) {
                percent = Math.ceil(percent);
                bar.css("width", percent+"%").text(percent+"%");
            },

            allcomplete: function(response) {

                bar.css("width", "100%").text("100%");

                setTimeout(function(){
                    progressbar.addClass("uk-hidden");
                }, 250);

                // alert("Upload Completed")
            }
        };

        var select = UIkit.uploadSelect($("#upload-select"), settings),
            drop   = UIkit.uploadDrop($("#upload-drop"), settings);
    }
);

function initVM(data) {
    $('#div-taskinfo').show();

    var vm = new Vue({
        el: '#div-taskinfo',
        data: {
            ljt_taskinfo: data.ljt_taskinfo
        },
        methods: {
            
            delete_config: function (config) {
                showConfirm('确认删除？', '确认要删除评论“' + config.name + '”？删除后不可恢复！', function () {
                    postApi('/api/configs/' + config.id + '/delete', {}, function (err, r) {
                        if (err) {
                            return showError(err);
                        }
                        location.reload();
                    });
                });
            }
        }
    });
}
$(function() {
    getApi('/api/ljt/index', function (err, results) {
        if (err) {
            return showError(err);
        }
        initVM(results);
        $('#div-loading').hide();
       
    });

});

</script>

{% endblock %}

{% block content %}
    
    <div class="uk-width-1-1 uk-margin-bottom" >
        <div class="uk-panel uk-panel-box">
            <ul class="uk-breadcrumb">
            {% for m in menus %}
                {% if m.level == 2 and m.display == 1  %}
                <li><a href="{{ m.url }}"><span>{{ m.name }}</span></a></li>
                {% endif %}
            {% endfor %}
            </ul>
        </div>
    </div>
    <div class="data-uk-margin">
        <button class="uk-button uk-button-primary" data-uk-modal="{target:'#model_add_contract',bgclose:false}"  type="button"> 合同 </button>
        <button class="uk-button uk-button-primary " type="button" disabled>赊销</button>
        <button class="uk-button uk-button-primary " type="button" disabled>删除</button>
    </div>
    <div id="model_add_contract" class="uk-modal " aria-hidden="true" style="display: none; overflow-y: scroll;">
        <div class="uk-modal-dialog  ">
            <button type="button" class="uk-modal-close uk-close"></button>
            <div class="uk-vertical-align-middle" style="width: 550px">
                <p><i class="uk-icon-html5"></i> 新建合同任务</p>

                <form id="form-add-db-config"  class="uk-panel uk-panel-box uk-form">
                    <div class="uk-alert uk-alert-danger uk-hidden"></div>
                    <div class="uk-form-row">
                        <div class="uk-form-icon uk-width-1-1">
                            <i class="uk-icon-calendar-check-o"></i>
                            <input data-uk-datepicker="{format:'YYYYMMDD'}" v-model="username" name="username" type="text" placeholder="合同日期" maxlength="50" class="uk-width-1-1 uk-form-large">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <div class="uk-form-icon uk-width-1-1">
                            <i class="uk-icon-file-word-o"></i>
                            <input v-model="username" name="username" type="text" placeholder="模板文件" maxlength="50" class="uk-width-1-1 uk-form-large">
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <div id="upload-drop" class="uk-placeholder uk-text-center">
                            <i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i> 将<code>明细文件</code>拖拽至此 或 <a class="uk-form-file">选择<input id="upload-select"  type="file"></a>
                        </div>
                        <div id="progressbar" class="uk-progress uk-hidden">
                            <div class="uk-progress-bar" style="width: 0%;">0%</div>
                        </div>
                    </div>
                    <div class="uk-form-row">
                        <button v-on:click="dbsubmit" class="uk-width-1-1 uk-button uk-button-primary"><i class="uk-icon-sign-in"></i> 生成合同 </button>
                    </div>
                </form>
                
            </div>
        </div>
    </div>
    <div id="div-taskinfo" class="uk-width-1-1" style="display:none">
        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-1-10">序号</th>
                    <th class="uk-width-2-10">明细</th>
                    <th class="uk-width-2-10">合同数量</th>
                    <th class="uk-width-2-10">创建时间</th>
                    <th class="uk-width-1-10">状态</th>
                    <th class="uk-width-2-10">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="lt in ljt_taskinfo" >
                    <td>
                        <span v-text="lt.id"></span>
                    </td>
                    <td>
                        <span v-text="lt.detail_file_name"></span>
                    </td>
                    <td>
                        <span v-text="lt.contract_num"></span>
                    </td>
                    <td>
                        <span v-text="lt.create_time"></span>
                    </td>
                    <td>
                        <span v-text="lt.state"></span>
                    </td>
                    <td>
                        <a href="#0" v-on:click="delete_config(xc)"><i class="uk-icon-cog"></i>
                        <a href="#0" v-on:click="delete_config(xc)"><i class="uk-icon-trash-o"></i>
                    </td>
                </tr>
            </tbody>
        </table>
       
    </div>
    <div id="div-loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
    </div>
{% endblock %}
